<template>
	<view class="content">

		<view>
			<view class="created">
				<view class="user_name">
					<view class="">创建人： </view>
					<view class="">{{detail.user_name}}</view>
				</view>
				<view class="created_at">
					<view class="">创建时间： </view>
					<view class="">{{detail.created_at}}</view>
				</view>
			</view>

			<view class="tou">
				<view class="wenti">反馈类型： </view>
				<view class="feedbackYes">{{detail.title}}</view>
			</view>

			<view class="zhong">
				<view class="wenti">问题</view>
				<view class="shuruk yijian">{{detail.content}}</view>

				<view class="gui-margin-top" style="width: 100%; padding-left: 20rpx;" v-if="detail.imgs.length > 0">
					<text class="gui-h4">图片</text>
					<view style="display: flex; flex-wrap: wrap;">
						<view v-for="(item, index) in detail.imgs.split(',')"
							style="width: 137rpx; height: 92rpx; border-radius: 20rpx; margin: 20rpx 12rpx;"
							:key="index">
							<image @tap="show_img(item)" style="width: 100%; height: 100%;" :src="item" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

			<!-- 审批流 -->
			<view class="approvalProcess">
				<view class="wenti">审批流</view>
				<view v-for="(item,index) in detail.process" :key="index" class="is_sp"
					:class="item.is_approver == '1' ? 'bor_r gui-flex' : 'gui-flex'">
					<text style="width: 80%;">{{item.approver_name}} : {{item.approver_opinion}}</text>
					<view style="width: 20%;text-align: right;">
						<text class="gui-color-red">{{item.approver_status == "1" ? "已审核" : "待审核"}}</text>
					</view>
				</view>
			</view>

			<!-- 审核意见 -->
			<view class="opinion" v-if="detail.this_process">
				<view style="display: flex; margin-top: 20rpx; align-items: center;">
					<view class="wenti" style="margin-bottom: 15rpx;">审核意见 : </view>
					<radio-group @change="radioChange" style="display: flex;">
						<label class="" v-for="(item, index) in items" :key="item.value" style="margin-left: 50rpx;">
							<radio :value="item.value" :checked="index === current" />
							<text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
				<input v-model="opinion" type="text" class="gui-form-input"
					style="border: solid 1px #acacac; border-radius: 5rpx; width: 90%; height: 60rpx; padding-left: 10rpx; margin-left: 30rpx;">
				<view class="" v-if="is_reply">
					<view class="wenti">回复 : </view>
					<textarea v-model="reply" placeholder="请输入回复内容" style="width: 90%; height: 200rpx; border-radius: 20rpx; padding: 2%; border: #acacac solid 1rpx;
						 margin: 20rpx 0 20rpx 20rpx;"></textarea>
				</view>
			</view>

			<view class="gui-padding submit" v-if="detail.this_process">
				<button type="warn" @click="submit">确认审核</button>
			</view>
			<view class="accomplish" v-else>
				<view type="warn">审核已完成</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("member"),
				apiUrl: 'https://jf.lgwisdomunion.cn',
				feedback_index: 0,
				feedback_text: '',
				type_index: 0,
				items: [{
					value: '1',
					name: '通过',
					checked: 'true'
				}, {
					value: '0',
					name: '不通过',
				}, ],
				imgs: [],
				detail: [],
				id: null,
				token: uni.getStorageSync("token"),
				opinion: '',
				reply: '',
				is_reply: null,
				current: 0,
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.get_detail(this.id);
			console.log('idid: ', this.id);
		},
		methods: {
			show_loading() {
				uni.showLoading({
					title: '请稍后...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
			get_detail(id) {
				//详情
				let self = this;
				self.show_loading();
				
				self.$boya.Request({
					url: '/mailbox/get_sh_detail',
					data: {
						tp: 'feedback',
						id: id,
						token: self.token,
					}
				}, function(res) {
					console.log('get_detail: ', res.data);
					self.hide_loading();
					if (res.code == 200) {
						self.opinion = res.data.defult_op
						self.is_reply = res.data.is_reply;
						self.detail = res.data.detail
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				}, false)
			},
			show_img(url) {
				uni.previewImage({
					urls: [url],
					index: 0
				});
			},
			radioChange: function(evt) {
				let self = this
				let items = self.items
				for (let i = 0; i < items.length; i++) {
					if (items[i].value === evt.detail.value) {
						self.current = i;
						break;
					}
				}
			},
			submit() {
				if (this.is_reply) {
					if (!this.reply) {
						this.$boya.msg('请填写回复内容')
					} else {
						this.confirm();
					}
				} else {
					this.confirm();
				}
			},
			confirm() {
				let self = this
				uni.showModal({
					title: '提示',
					content: '是否确认审核?',
					success(res) {
						if (res.confirm) {
							self.show_loading();
							self.$boya.Request({
								url: '/mailbox/sh',
								data: {
									opinion: self.opinion,
									reply: self.reply,
									mail_id: self.id,
									is_tg: self.items[self.current].value,
									token: self.token
								}
							}, function(res) {
								self.hide_loading();
								console.log('res: ', res);
								if (res.code == 200) {
									uni.showModal({
										title: '提示',
										content: '审核成功',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												self.get_detail();
												window.location.reload(true);
											}
										}
									})
								} else {
									uni.showModal({
										title: '提示',
										content: res.data
									});
								}
							}, false)
						}
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url("https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png") 100% 100% / 100% 100%;
	}

	.wenti {
		font-size: 35rpx;
		margin-top: 15rpx;
		margin-left: 18rpx;
	}

	.created {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.created>view {
		display: flex;
		align-items: center;
	}
	
	.user_name,
	.created_at{
		padding: 15rpx;
	}

	.tou {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 5rpx 15rpx 15rpx 15rpx;
		display: flex;
		align-items: center;
	}

	.feedbackYes {
		width: 100rpx;
		padding: 16rpx 40rpx;
		margin: 20rpx 25rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		color: white;
		margin-top: 30rpx;
		background: linear-gradient(to right, #F55661, #F06C35);
	}

	.feedbackNo {
		background-color: #F5F6F9;
	}

	.zhong {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.yijian {
		padding: 15rpx;
	}

	.xia {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.shoujih {
		height: 90rpx;
	}

	.shuruk {
		width: 91%;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		margin-left: 18rpx;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background-color: #F5F6F9;
	}

	.tijiao {
		color: white;
		width: 80%;
		margin-top: 40rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #F06C35, #F55661);
	}

	.navBar {
		width: 93%;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 10rpx 8rpx 10rpx rgba(198, 200, 207, 0.8);
	}

	.typeYes {
		color: #E64340;
		font-weight: bold;
	}

	.typeName {
		font-size: 28rpx;
		margin-top: -10rpx;
	}

	.submit {
		margin-top: 20rpx;
	}

	.coreContent {
		width: 82%;
		height: 145rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
		line-height: 50rpx;
	}

	.feedback {
		width: 99%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.shenhezt {
		display: flex;
		align-items: center;
		color: #8B8B8B;
		float: right;
	}

	.panduan {
		display: flex;
		align-items: center;
	}

	.tubiao {
		width: 35rpx;
		height: 35rpx;
	}

	.approvalProcess {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.opinion {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.is_sp {
		margin: 15rpx;
		padding: 15rpx;
	}

	.bor_r {
		border: red solid 1rpx;
	}

	.accomplish {
		width: 92%;
		margin: 0 auto;
		text-align: center;
		height: 85rpx;
		color: white;
		font-size: 35rpx;
		line-height: 85rpx;
		background-color: #E64340;
		border-radius: 10rpx;
		margin-top: 45rpx;
	}
</style>